<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="subsection">
					<u-subsection fontSize="15" :list="list" :current="current" @change="sectionChange"
						activeColor="#1EE825" inactiveColor="#333333;"></u-subsection>
				</view>
				<view class="show-items-item-wrap">
					<view class="show-items-item" v-for="(item, index) in itemList" :key="item.id"
						@click="goDetail(item)">
						<view class="head_o">
							<view class="show-items-item-left">
								<image class="show-items-item-image" :src="item.picUrl"></image>
								<view class="show-items-item-image-bontton">
									<image src="../../static/images/time.png"></image>
									<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}
									</view>
								</view>
							</view>
							<view class="show-items-item-right">
								<view class="show-items-item-right-one">
									<view :class="[item.resourceType == '1' ? 'active' : '']">
										{{ item.resourceType == '1' ? '出售' : '采购' }}
									</view>
									<view style="font-weight: 600">{{ item.title }}</view>
								</view>
								<view class="show-items-item-right-two">
									{{ item.pubContent }}
								</view>
								<view class="show-items-item-right-four">
									<image src="../../static/images/location.png"></image>
									<view>{{ showLocation(item.province, item.city) }}</view>
									<view>￥{{ item.price ? item.price : '电议' }}</view>
								</view>
								<view class="show-items-item-right-five">
									<image :src="item.briefUserInfo.avatar"></image>
									<view>{{ item.briefUserInfo.nickName }}</view>
									<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
								</view>
								<view class="show-items-item-right-six">
									<view class="one b-btn">
										<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
										<view class="b-count">
											{{ item.viewCount == null ? 0 : item.viewCount }}
										</view>
									</view>
									<view @tap.stop="handleCollect(item, index)" class="two b-btn">
										<image v-if="item.collectFlag == '0'" class="b-img"
											src="../../static/images/collect.png"></image>
										<image v-else class="b-img" src="../../static/images/like1.png" />
										<view class="b-count">
											{{ item.collectCount == null ? 0 : item.collectCount }}
										</view>
									</view>
									<view class="three b-btn">
										<image class="b-img" src="../../static/images/message.png"></image>
										<view class="b-count">
											{{ item.commentCount == null ? 0 : item.commentCount }}
										</view>
									</view>
									<view class="four b-btn">
										<image class="b-img" src="../../static/images/zhaunfa.png"></image>
										<button class="share-btn" open-type="share"
											@tap.stop="handShareCountAdd(item, index)"> 分享
											{{ item.shareCount == null ? 0 : item.shareCount }}
										</button>
									</view>
								</view>
							</view>
						</view>
						<view class="botter_o">
							<view @click.stop="paiqian(item.id)">排前</view>
							<!-- <view @click.stop="goUpdate(item.id)">修改</view> -->
							<view @click.stop="showDelete(item)">删除</view>
						</view>
					</view>
				</view>
				<view v-show="show" style="height: 70rpx; line-height: 70rpx; width: 100%">
					<u-loadmore icon :status="status" />
				</view>
				<view style="height: 28rpx"></view>
				<u-modal :show="show3" showCancelButton closeOnClickOverlay @confirm="confirm" @cancel="cancel"
					@close="close">
					<view style="text-align: center">确定删除该笔订单吗？</view>
				</u-modal>
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import locationFormatter from '@/util/locationFormatter';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				show3: false,
				status: 'loading',
				show: true,
				pageSize: 5,
				pageNum: 1,
				total: 0,
				itemList: [],
				pageTitle: '我的供求',
				showSex: false,
				// 已发布 2  审核中 1  未通过
				list: ['全部', '已发布', '审核中', '未通过'],
				current: 0,
				checkStatusList: [],
				userId: null,
				deletItem: {},
				shareTile: ''
			};
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShow() {
			this.getData();
		},
		onPullDownRefresh() {
			// 下拉刷新的处理逻辑
			this.pageNum = 1;
			this.status = 'loading';
			this.itemList = [];
			this.getData();
		},
		onReachBottom() {
			if (this.total == this.itemList.length) {
				this.status = 'nomore';
				this.show = true;
				return;
			}
			this.show = true;
			this.pageNum++;
			this.getData();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.shareTile, //分享的名称
				path: '/pages/wodegongqiu/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '找纸塑网一废纸废塑料AI获客平台',
				type: 0,
				summary: ''
			};
		},
		methods: {
			showLocation(pro, city) {
				const displayName = locationFormatter.format(pro, city);
				return displayName;
				console.log(displayName); // 输出：浙江杭州
			},
			//增加分享次数
			handShareCountAdd(item, index) {
				this.shareTile = item.title;
				this.$https.post(this.$api.getPubShareCountAdd, {
					id: item.id
				}).then((res) => {
					if (res.code === 200) {
						this.itemList[index].shareCount = this.itemList[index].shareCount + 1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 1,
					processType: item.collectFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						if (item.collectFlag == 0) {
							this.itemList[index].collectFlag = '1';
							this.itemList[index].collectCount++;
						} else {
							this.itemList[index].collectFlag = '0';
							this.itemList[index].collectCount--;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			paiqian(id) {
				this.$https.post(this.$api.getrefreshSort, { id: id }).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '排前成功',
							icon: 'success'
						});
						this.getData();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/page/detail/index?id=${item.id}&title=${item.title}`
				});
			},
			goUpdate(id) {
				uni.navigateTo({
					url: '/page/updatePub/index?id=' + id
				});
			},
			showDelete(item) {
				this.deletItem = item;
				this.show3 = true;
			},
			confirm() {
				this.show3 = false;
				this.deleteInfo();
			},
			cancel() {
				this.deletItem = {};
				this.show3 = false;
			},
			sectionChange(index) {
				this.current = index;
				this.reset();
			},
			reset() {
				this.pageNum = 1;
				this.getData();
			},
			deleteInfo() {
				this.$https.post(this.$api.deletePubInfo, {
					id: this.deletItem.id
				}).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: '删除成功'
						});
						this.reset();
					} else {
						uni.showToast({
							icon: 'error',
							title: '删除失败'
						});
					}
				});
			},
			getData() {
				var checkStatusListStr = '';
				if (this.current == 0) {
					checkStatusListStr = '1,2,3';
				} else if (this.current == 1) {
					checkStatusListStr = '2';
				} else if (this.current == 2) {
					checkStatusListStr = '1';
				} else {
					checkStatusListStr = '3';
				}
				const query = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					checkStatusListStr: checkStatusListStr,
					userId: this.userId
				};
				this.$https.get(this.$api.pubInfoPage, query).then((res) => {
					if (res.code === 200) {
						if (this.pageNum == 1) {
							this.itemList = [];
						}
						const data = res.data;
						this.total = res.total;
						this.pageTitle = '我的供求（' + res.total + ')';
						this.itemList = [...this.itemList, ...res.rows];
						if (this.total == 0) {
							this.status = 'nomore';
							this.show = true;
						} else {
							this.show = false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.share-btn {
		font-size: 20rpx;
		width: 100rpx;
		line-height: 37rpx;
	}

	.my_container {
		width: 100%;

		.my_container_body {
			width: 750rpx;
			min-height: 1624rpx;
			background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				width: 686rpx;

				.subsection {
					padding-top: 20rpx;
					width: 686rpx;
					position: fixed;
					background-color: #ddffde;
				}

				::v-deep .u-subsection__item__text {
					font-weight: 600 !important;
				}

				.show-items-item-wrap {
					margin-top: 100rpx;
				}

				.show-items-item {
					width: 686rpx;
					height: 406rpx;
					background: #ffffff;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 20rpx;

					.head_o {
						display: flex;
						height: 308rpx;

						.show-items-item-left {
							.show-items-item-image {
								width: 212rpx;
								height: 224rpx;
								margin-top: 28rpx;
								margin-left: 20rpx;
								border-radius: 24rpx;
							}

							.show-items-item-image-bontton {
								height: 70rpx;
								width: 212rpx;
								margin-left: 20rpx;
								display: flex;
								margin-top: 20rpx;

								image {
									width: 36rpx;
									height: 36rpx;
								}

								view {
									width: 128rpx;
									height: 36rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
									line-height: 36rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-left: 4rpx;
								}
							}
						}

						.show-items-item-right {
							margin-left: 20rpx;
							height: 322rpx;

							.show-items-item-right-one {
								display: flex;
								align-items: center;

								:nth-child(1) {
									width: 72rpx;
									height: 40rpx;
									line-height: 40rpx;
									background-color: #556983;
									border-radius: 10rpx;
									margin-top: 38rpx;
									margin-right: 10rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 18rpx;
									color: #fff;
									text-align: center;
									font-style: normal;
									text-transform: none;
								}

								.active {
									width: 72rpx;
									height: 40rpx;
									line-height: 40rpx;
									background-color: #4fe200;
									border-radius: 10rpx;
									margin-top: 38rpx;
									margin-right: 10rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 18rpx;
									color: #fff;
									text-align: center;
									font-style: normal;
									text-transform: none;
								}

								:nth-child(2) {
									margin-top: 38rpx;
									width: 340rpx;
									height: 40rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 500;
									font-size: 28rpx;
									color: #333333;
									line-height: 39rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									overflow: hidden;
									/* 确保超出部分的文本会被隐藏 */
									text-overflow: ellipsis;
									/* 超出部分显示省略号 */
									display: -webkit-box;
									/* 使用弹性盒子模型 */
									-webkit-line-clamp: 2;
									/* 限制显示两行 */
									-webkit-box-orient: vertical;
									/* 垂直排列子元素 */
								}
							}

							.show-items-item-right-two {
								width: 414rpx;
								height: 68rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 28rpx;
								color: #333;
								line-height: 34rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-top: 10rpx;
								overflow: hidden;
								/* 确保超出部分的文本会被隐藏 */
								text-overflow: ellipsis;
								/* 超出部分显示省略号 */
								display: -webkit-box;
								/* 使用弹性盒子模型 */
								-webkit-line-clamp: 2;
								/* 限制显示两行 */
								-webkit-box-orient: vertical;
								/* 垂直排列子元素 */
							}

							.show-items-item-right-four {
								display: flex;
								width: 414rpx;
								height: 44rpx;

								image {
									width: 24rpx;
									height: 26rpx;
									border-radius: 0rpx 0rpx 0rpx 0rpx;
									margin-top: 9rpx;
								}

								:nth-child(2) {
									flex: 1;
									height: 44rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #333;
									line-height: 44rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									padding-left: 4rpx;
								}

								:nth-child(3) {
									width: 180rpx;
									height: 44rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 600;
									font-size: 24rpx;
									color: #ff4400;
									line-height: 44rpx;
									text-align: right;
									font-style: normal;
									text-transform: none;
								}
							}

							.show-items-item-right-five {
								display: flex;
								width: 414rpx;
								height: 44rpx;

								image {
									width: 40rpx;
									height: 40rpx;
									margin-top: 2rpx;
									border-radius: 24rpx 24rpx 24rpx 24rpx;
									border: 1rpx solid #e4e8ef;
								}

								:nth-child(2) {
									width: 220rpx;
									line-height: 44rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
									line-height: 44rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									padding-left: 10rpx;
								}

								:nth-child(3) {
									width: 154rpx;
									line-height: 44rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 20rpx;
									color: #ff4400;
									line-height: 44rpx;
									text-align: right;
									font-style: normal;
									text-transform: none;
								}
							}

							.show-items-item-right-six {
								padding-left: 10rpx;
								height: 40rpx;
								width: 414rpx;
								display: flex;
								justify-content: space-between;
								margin-top: 30rpx;
								line-height: 40rpx;

								.b-btn {
									display: flex;

									.b-img {
										width: 40rpx;
										height: 40rpx;
									}

									.b-count {
										margin-left: 4rpx;
										font-size: 24rpx;
									}
								}

								.four {
									width: 130rpx;
									position: relative;

									.b-img {
										width: 36rpx;
										height: 36rpx;
									}

									.share-btn {
										width: 120rpx;
										background-color: transparent;
										padding-left: 36rpx;
										position: absolute;
										font-size: 22rpx;
										line-height: 37rpx;
										top: 0;
									}
								}
							}
						}
					}

					.botter_o {
						display: flex;
						width: 686rpx;
						font-weight: 400;
						font-size: 24rpx;
						height: 48rpx;
						margin-top: 25rpx;

						:nth-child(1) {
							margin-left: 312rpx;
							width: 100rpx;
							height: 48rpx;
							line-height: 44rpx;
							border-radius: 100rpx 100rpx 100rpx 100rpx;
							border: 1rpx solid #19e820;
							text-align: center;
							color: #19e820;
						}

						:nth-child(2) {
							margin-left: 28rpx;
							width: 100rpx;
							height: 48rpx;
							line-height: 44rpx;
							border-radius: 100rpx 100rpx 100rpx 100rpx;
							border: 1rpx solid #19e820;
							text-align: center;
							color: #19e820;
						}

						:nth-child(3) {
							margin-left: 28rpx;
							width: 100rpx;
							height: 48rpx;
							line-height: 44rpx;
							border-radius: 100rpx 100rpx 100rpx 100rpx;
							border: 1rpx solid #ff4400;
							text-align: center;
							color: #ff4400;
						}
					}
				}
			}
		}
	}
</style>